<template>
  <div>
    <section class="jumbotron">
      <h3 class="jumbotron-heading">Search Github Users</h3>
      <div>
        <input type="text" placeholder="enter the name you search" v-model="searchInput"/>&nbsp;<button @click="getUsersList">Search</button>
      </div>
    </section>
  </div>
</template>

<script>
import pubsub from "pubsub-js";
export default {
  name: "Search",
  data(){
    return{
      users:[],
      searchInput:''
    }
  },
  methods:{
    getUsersList(){
      pubsub.publish('getUsersList',{users:[],isFirst:false,isLoading:true,error:''}) //发送请求前
      this.$http.get(`https://api.github.com/search/users?q=${this.searchInput}`).then(
          (response)=>{
            this.users = response.data.items
            pubsub.publish('getUsersList',{users:this.users,isFirst:false,isLoading:false,error:''}) //请求发送成功后
          },
          (error)=>{
            /*console.log("error:",error.message)*/
            pubsub.publish('getUsersList',{users:[],isFirst:false,isLoading:false,error:error.message}) //请求发送失败后
          }
      )
    }
  }
}
</script>

<style scoped>

</style>